<faq-list-flatted data-section-id="{{ section.id }}" data-faq-type="flatted">
  <div class="container-md faq-list-flatted">
    <div class="row d-flex justify-content-center mx-0 faq-list-flatted-row">
      {% comment %} menu {% endcomment %}
      <div class="col-12 col-xl-3 col-md-4 ps-md-0 h-100 sticky-top as-faq-list-flatted-menu" style="z-index:5;">
        {% render 'faq-tab-flatted-menu', faqs: faqs %}
      </div>
      <div class="col-12 col-xl-9 col-md-8 pe-md-0">
        <div class="tab-content h-100 px-3 px-md-0">
          {%- for faq_category in faqs.links -%}
            {% assign path_segments = faq_category.url | split: '/' %}
            {% assign blog_handle = path_segments.last %}
            {%- assign faq_blog_posts = blogs[blog_handle] -%}
            {% render 'faq-tab-flatted-pane', item: faq_category, faq_blog_posts: faq_blog_posts , forloop: forloop, %}
          {%- endfor -%}
        </div>
      </div>
    </div>
  </div>
</faq-list-flatted>
